<template>
    <el-form 
        :model="form" 
        ref="form" 
        :rules="rules" 
        class="form">
            <el-form-item class="form-item" prop="username">
                <el-input 
                placeholder="用户名手机" v-model="form.username">
                </el-input>
            </el-form-item>

            <el-form-item class="form-item" prop="captcha">
                <el-input 
                placeholder="验证码" v-model="form.captcha" >
                    <template slot="append">
                        <el-button @click="handleSendCaptcha">
                            发送验证码
                        </el-button>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item class="form-item" prop="nickname">
                <el-input 
                placeholder="你的名字" v-model="form.nickname">
                </el-input>
            </el-form-item>

            <el-form-item class="form-item" prop="password">
                <el-input 
                placeholder="密码" 
                type="password" v-model="form.password"
                ></el-input>
            </el-form-item>

            <el-form-item class="form-item" prop="checkPassword">
                <el-input 
                placeholder="确认密码" 
                type="password" v-model="form.checkPassword">
                </el-input>
            </el-form-item>

            <el-button 
            class="submit" 
            type="primary" 
            @click="handleRegSubmit">
                注册
            </el-button>
        </el-form>
</template>

<script>
import {sendCaptcha,register} from './user.js'
export default {
    data(){
        // 由于校验函数只是在 data 使用
        // 可以不需要写在 method

        const validateCheckPass = (rule,value,callback)=>{
            // callback 这个形参是 Element 传入的一个固定回调函数
            // 校验完成就需要执行
            // 1. 如果校验合法, 直接执行, 没有参数
            // 2. 如果不合法, 就要带上一个错误对象参数 new Error('两次密码必须相同')
            if(!value){
              callback(new Error('请输入必填信息'))
            }else if (value != this.form.password){
              callback(new Error('两次密码必须一致'))
            }else{
              callback()
            }
        }

        return {
            // 表单数据
            form: {
              username:'',      //用户名/手机
              password:'',      //密码
              nickname:'',      //昵称
              captcha:'',       //手机验证码
              checkPassword:''  //确认密码
            },
            // 表单规则
            rules: {
                username:[
                    {
                      required:true,message:'请输入必填信息',trigger:'blur'
                    }
                ],
                password:[
                    {
                      required:true,message:'请输入必填信息',trigger:'blur'
                    }
                ],
                nickname:[
                    {
                      required:true,message:'请输入必填信息',trigger:'blur'
                    }
                ],
                captcha:[
                    {
                      required:true,message:'请输入必填信息',trigger:'blur'
                    }
                ],
                checkPassword:[
                    {
                      required:true,message:'请输入必填信息',trigger:'blur'
                    }
                ],
                checkPassword:[
                  {
                    // 这里的校验并非默认自带的校验方式
                    // 而是需要自定义,所以 判断标准和提示语都要自己写
                    // 给一个函数作为 validator 即可
                    validator:validateCheckPass,
                    trigger:'blur'
                  }
                ]
            },
        }
    },
    methods: {
        // 发送验证码
        handleSendCaptcha(){
          const regexp = /^1[3456789]\d{9}$/
          if (!regexp.test(this.form.username)){
            return this.$message.error('请输入正确手机号')
          }
          sendCaptcha(this.form.username).then(res=>{
            console.log(res);
            if(res.data.code){
              this.$message.success('成功获取验证码：' + res.data.code)
            }
          })
        },


        // 注册
        handleRegSubmit(){
          console.log(this.form)
          // 全局校验表单是否填写完毕
          // 填写完毕再发送
          this.$refs.form.validate().then(isValid=>{
            if(isValid){
              const {checkPassword,...data} = this.form
              register(data).then(res=>{
                console.log(res.data);
                if(res){
                  // this.$store.commit('userstore/setUserInfo',res.data)
                  // this.$message.success('注册成功')
                  // this.$router.push('/')
                  // 第二种操作可以是跳转登录表单进行登录
                  // 因为这个注册表单,跟登录表单同属于 login.vue 页面的子组件, 自己没法切换
                  // 需要通知父组件
                  this.$message.success('注册成功')
                  this.$emit('toLogin')
                }
              })
            }
          })
        }
    }
}
</script>

<style scoped lang="less">
    .form{
        padding:25px;
    }

    .form-item{
        margin-bottom:20px;
    }

    .form-text{
        font-size:12px;
        color:#409EFF;
        text-align: right;
        line-height: 1;
    }

    .submit{
        width:100%;
        margin-top:10px;
    }
</style>